<template>
  <div>
    <table class="call-detail">
      <tr  class="content cust-content header-top">
        <td>{{$t('call.callNumber')}}：{{callDataTable.CALL_SHEET_ID}}</td>
      </tr>
      <tr class="header">
        <td>
          <div class="left">
            <el-popover
              ref="popover2"
              placement="bottom"
              width="80"
              trigger="hover">
              <ul class="dropdownStyle">
                  <li v-for="(item,index) of joinBlackType" :key='index' @click="addCdrBlackList(callDataTable.CALL_NO,item.type,item.label)">{{item.label}}</li>
              </ul>
            </el-popover>
            <div class="el-toolip">
            <i  v-show="isToBlackList && isCall&& callDataTable.CONNECT_TYPE=='normal'||callDataTable.CONNECT_TYPE=='transfer'" class="icon iconfont icon-heimingdan" v-popover:popover2></i>
              <span v-show="callDataTable.CONNECT_TYPE=='dialout'||callDataTable.CONNECT_TYPE=='dialTransfer'">{{callDataTable.CONNECT_TYPE=='dialout'||callDataTable.CONNECT_TYPE=='dialTransfer'?callDataTable.CALL_NO_SHOW:callDataTable.CALLED_NO_SHOW}}</span>
              <span v-show="callDataTable.CONNECT_TYPE=='normal'||callDataTable.CONNECT_TYPE=='transfer'">{{callDataTable.CONNECT_TYPE=='normal'||callDataTable.CONNECT_TYPE=='transfer'?callDataTable.CALL_NO_SHOW:callDataTable.CALLED_NO_SHOW}}</span>
              <span class="ellipsis table-agent-ten" v-show="!isHidenArea && callDataTable.PROVINCE !=='' && callDataTable.DISTRICT!== ''" :title="(callDataTable.CONNECT_TYPE=='dialout'||callDataTable.CONNECT_TYPE=='dialTransfer')?callDataTable.DISPOSAL_AGENT_show:'('+ callDataTable.PROVINCE +'-'+ callDataTable.DISTRICT +')'">{{callDataTable.CONNECT_TYPE=='dialout'||callDataTable.CONNECT_TYPE=='dialTransfer'?callDataTable.DISPOSAL_AGENT_show:'('}}{{callDataTable.CONNECT_TYPE=='dialout'||callDataTable.CONNECT_TYPE=='dialTransfer'?"":callDataTable.PROVINCE || ''}}{{callDataTable.CONNECT_TYPE=='dialout'||callDataTable.CONNECT_TYPE=='dialTransfer'?"":'-'}} {{callDataTable.CONNECT_TYPE=='dialout'||callDataTable.CONNECT_TYPE=='dialTransfer'?"":callDataTable.DISTRICT || ''}}{{callDataTable.CONNECT_TYPE=='dialout'||callDataTable.CONNECT_TYPE=='dialTransfer'?"":')'}}</span>
              <span class="ellipsis table-agent-five" v-show="callDataTable.queueName && callDataTable.queueName!== '--'" :title="(callDataTable.CONNECT_TYPE=='dialout'||callDataTable.CONNECT_TYPE=='dialTransfer')?'('+callDataTable.queueName+')' || '':''" >{{(callDataTable.CONNECT_TYPE=='dialout'||callDataTable.CONNECT_TYPE=='dialTransfer')?'('+callDataTable.queueName+')' || '':''}} </span>
            </div>
          </div>
          <div class="middle">
            <p v-bind:class="{exhalation:callDataTable.CONNECT_TYPE=='normal'||callDataTable.CONNECT_TYPE=='transfer','incoming':callDataTable.CONNECT_TYPE=='dialout'||callDataTable.CONNECT_TYPE=='dialTransfer'}">{{callDataTable.CONNECT_TYPE_show}}</p>
            <p>
              <span class="arrow"></span>
            </p>
            <p>{{callDataTable.OFFERING_TIME|| '--'}}</p>
          </div>
          <div class="right">
          <el-popover
              ref="popover1"
              placement="bottom"
              width="80"
              trigger="hover">
              <ul class="dropdownStyle">
                  <li v-for="(item,index) of joinBlackType" :key='index' @click="addCdrBlackList(callDataTable.CALLED_NO,item.type,item.label)">{{item.label}}</li>
              </ul>
          </el-popover>
            <i v-show="isToBlackList && isCall && callDataTable.CONNECT_TYPE=='dialout'||callDataTable.CONNECT_TYPE=='dialTransfer'"  class="icon iconfont icon-heimingdan" v-popover:popover1></i>
            <span class="dialout-phone ellipsis" v-show="callDataTable.CONNECT_TYPE=='dialout'||callDataTable.CONNECT_TYPE=='dialTransfer'">{{callDataTable.CONNECT_TYPE=='dialout'||callDataTable.CONNECT_TYPE=='dialTransfer'?callDataTable.CALLED_NO_SHOW:callDataTable.CALL_NO_SHOW}}</span>
            <span v-show="callDataTable.CONNECT_TYPE=='normal'||callDataTable.CONNECT_TYPE=='transfer'">{{callDataTable.CONNECT_TYPE=='normal'||callDataTable.CONNECT_TYPE=='transfer'?callDataTable.CALLED_NO_SHOW:callDataTable.CALL_NO_SHOW}}</span>
            <span class="ellipsis dvv table-agent-ten mar" v-show="!isHidenArea && callDataTable.PROVINCE !=='' && callDataTable.DISTRICT!== ''" :title="(callDataTable.CONNECT_TYPE=='dialout'||callDataTable.CONNECT_TYPE=='dialTransfer')?'('+ callDataTable.PROVINCE +'-'+ callDataTable.DISTRICT +')':callDataTable.DISPOSAL_AGENT_show"> {{callDataTable.CONNECT_TYPE=="dialout"||callDataTable.CONNECT_TYPE=='dialTransfer'?'(':''}}{{callDataTable.CONNECT_TYPE=="dialout"||callDataTable.CONNECT_TYPE=='dialTransfer'?callDataTable.PROVINCE || '':callDataTable.DISPOSAL_AGENT_show}}{{callDataTable.CONNECT_TYPE=="dialout"||callDataTable.CONNECT_TYPE=='dialTransfer'?'-':''}}{{callDataTable.CONNECT_TYPE=="dialout"||callDataTable.CONNECT_TYPE=='dialTransfer'?callDataTable.DISTRICT || '':''}}{{callDataTable.CONNECT_TYPE=="dialout"||callDataTable.CONNECT_TYPE=='dialTransfer'?')':''}} </span>
            <span class="ellipsis dvv8 table-agent-five" v-show="callDataTable.queueName && callDataTable.queueName!== '--'" :title="(callDataTable.CONNECT_TYPE=='dialout'||callDataTable.CONNECT_TYPE=='dialTransfer')?'':'('+callDataTable.queueName+')' || ''" > {{(callDataTable.CONNECT_TYPE=='dialout'||callDataTable.CONNECT_TYPE=='dialTransfer')?'':'('+callDataTable.queueName+')' || ''}}</span>
          </div>
        </td>
      </tr>

      <tr v-if="isCallGrade" class="content cust-content">
        <td class="flex2">{{$t('public.customer')}}</td>
        <td class="flex10">
          <p>{{callDataTable.CUSTOMER_NAME|| '--'}}</p>
        </td>
      </tr>

      <tr class="content">
        <td class="flex2">{{$t('sms.time')}}</td>
        <td class="flex5">
          <div class="left">
              <span>
                  <p>{{$t('public.callTime')}}</p>
                  <p>{{$t('call.pickUpTime')}}</p>
                  <p>{{$t('call.handUpTime')}}</p>
                  <p v-if="isCallGrade && callDataTable.QC_SUBMIT">{{$t('qualityCheck.agentSubmitTime')}}</p>
              </span>
          </div>
          <div class="right">
              <span>
                <p>{{callDataTable.OFFERING_TIME|| '--'}}</p>
                <p>{{callDataTable.BEGIN_TIME|| '--'}}</p>
                <p>{{callDataTable.END_TIME  || '--'}}</p>
                <p v-if="isCallGrade && callDataTable.QC_SUBMIT">{{callDataTable.submitTime}}</p>
              </span>
          </div>
        </td>
        <td class="flex5">
          <div class="left">
              <span>
                 <p>{{$t('call.callTime')}}</p>
                 <p>{{$t('call.queueLen')}}</p>
                 <p>{{$t('call.ringLength')}}</p>
              </span>
          </div>
          <div class="right">
              <span>
                 <p>{{callDataTable.CALL_TIME_LENGTH_show||'--'}}</p>
                 <p>{{ callDataTable.queueTimeLen || '--' }}</p>
                <!--QUEUE_TIME_LENGTH-->
                 <p>{{ callDataTable.RING_TIME_LENGTH_show || '--' }}</p>
              </span>
          </div>
        </td>
      </tr>

      <tr class="main">
        <td class="flex2">{{$t('sms.smsState')}}</td>
        <td class="flex5">
          <div class="left">
              <span>
                   <p>{{$t('public.satisfaction')}}</p>
                   <p>{{$t('call.sign')}}</p>
                <!--<p>{{$t('call.skillGroup')}}</p>  &lt;!&ndash;呼入技能组&ndash;&gt;-->
                   <p v-show="callDataTable.MANYQUEUE_NUMBER && isCall">{{$t('call.queueTurnoverPath')}}</p>
              </span>
          </div>
          <div class="right">
              <span>
                 <p>{{callDataTable.satisfaction || '--'}}</p>
                 <div>
                    <div v-if="isCall">
                      <span>{{(callDataTable.KEY_TAG && isSameCallID(callDataTable.CALL_SHEET_ID))? $t('public.yes'): $t('public.no')}} &nbsp;&nbsp;&nbsp;</span>
                      <el-popover
                        ref="keyTag"
                        placement="top"
                        width="180"
                        v-model="cancleKeyTag">
                        <p class="remove-warn">{{$t('call.removeKeyTagWarn')}}</p>
                        <div class="remove-btn">
                          <el-button size="mini" type="text" @click="cancleKeyTag = false">{{$t('public.cancel')}}</el-button>
                          <el-button type="primary" size="mini" @click="sureCancleKeyTag(callDataTable._id)">{{$t('public.confirm')}}</el-button>
                        </div>
                      </el-popover>
                      <i class="icon iconfont icon-guanbi" v-show="callDataTable.KEY_TAG && isSameCallID(callDataTable.CALL_SHEET_ID) && isCall" v-popover:keyTag></i>
                    </div>
                    <div v-else>
                      {{callDataTable.KEY_TAG ? $t('public.yes'): $t('public.no')}}
                    </div>
                  </div>
                <el-tooltip placement="top" v-show="callDataTable.MANYQUEUE_NUMBER && isCall">
                  <div slot="content"> {{callDataTable.queueArrName || '--'}}</div>
                  <el-button class="el-button ellipsis many-queue adjustment" type="text">{{callDataTable.queueArrName || '--'}}</el-button>
                </el-tooltip>
              </span>
          </div>
        </td>
        <td class="flex5">
          <div class="left">
              <span>
                <p>{{$t('call.callStatusType')}}</p>
                <p>{{$t('call.repeatCall')}}</p>
                <p v-show="callDataTable.HANGUP_USER_show && callDataTable.HANGUP_USER_show !== ''">{{$t('call.inHangUpUser')}}</p>
              </span>
          </div>
          <div class="right">
              <span>
                <p>{{callDataTable.STATUS_show||'--'}}</p>
                <p :colspan="callDataTable.MANYQUEUE_NUMBER && isCall?4:5">{{callDataTable.repeatCall||'--'}}</p>
                <p v-show="callDataTable.HANGUP_USER_show && callDataTable.HANGUP_USER_show !== ''">{{callDataTable.HANGUP_USER_show}}</p>
              </span>
          </div>
        </td>
      </tr>
      <tr class="record submit-record" v-if="isCall && !isListent && isShowSubmitOrRevoke && callDataTable && callDataTable.STATUS === 'dealing' && recordShow"> 
        <!-- 是通话详情 && 没有听取录音的权限 && 有提交录音的权限 && 通话状态是已接听 && 是否展示提交录音 -->
        <td>
          <div class="left">{{$t('call.recording')}}</div>
          <div class="right">
             <submitRecord :currentObj="callData"></submitRecord>
          </div>
        </td>
      </tr>
      <tr class="record" v-else-if="isCallGrade?true:isListent">
        <td style="height:auto;min-height:80px;">
          <div class="left">
            <p>{{$t('call.recording')}}</p>
            <span v-show="isCallGrade">
                 <p>{{callDataTable.QC_SUBMIT?$t('qualityCheck.agentSubitted'):$t('qualityCheck.systemSubitted')}}</p> <!--系统抽取-->
              </span>
          </div>
          <div class="right">
            <old-audio-common :recordShow="recordShow" :iscallDetail="callDataTable.IS_DOUBLE_TRACK && curModel" @transText="transText" class="auto" v-if="showOld" :flagId="audioId + '_old'" :isAutoPlay="isAutoPlayFlag" :srcUrl="currentUrl" :refreshAudio="refreshAudio" :isShowAudioDownload="true" :isShowSubmitAudio="isCall"  :currentObj="callData" :isDownload="isCallGrade?true:isDownload" :isCallGrade="isCallGrade" @isAutoPlaySet='isAutoPlaySet' :isShowMore='isShowMore&&!isCallGrade' :consultRecordArr='consultRecordArr'></old-audio-common>
            <audio-common :recordShow="recordShow" :iscallDetail="callDataTable.IS_DOUBLE_TRACK && curModel" @transText="transText" class="auto" v-if="!showOld" :flagId="audioId?audioId:callDataTable._id" @showOldAudio="showOldAudio" :callStatus="isCallGrade?'dealing': callDataTable.STATUS" :pauseAudio='pauseAudio' :isAutoPlay="isAutoPlayFlag" :srcUrl="currentUrl" :refreshAudio="refreshAudio" :isShowAudioDownload="true" :isShowSubmitAudio="isCall"  :currentObj="callData" :isDownload="isCallGrade?true:isDownload" :isCallGrade="isCallGrade" :isShowMore='isShowMore&&!isCallGrade' @isAutoPlaySet='isAutoPlaySet' :consultRecordArr='consultRecordArr'></audio-common>
            <div v-if="isCallTran && curModel">
              <div class='transTip'>
                <span class="tran"><i class="iconfont icon-yuyinzhuanxie"></i>{{$t('call.voiceTranscription')}}<span class='tipi'>{{$t('call.transTip')}}</span></span>
                <span @click="unfoldTran" class="iconfont icon-shouqi1 fr" :class="{rota: !isUnfold}"></span> <el-input class="fr" @change="searchKeyword" style="width:120px;margin-right: 20px;" :placeholder="$t('call.enterSearchTerm')"  v-model="keyword" ><i slot="suffix" class="el-input__icon icon iconfont icon-sousuo"></i></el-input>
              </div>
              <div class="wrapper" ref="wrapper">
                <div class="content1" v-show="tranStatus === 'suc'">
                  <callChartBox :showParticiple="false" :agentId="agentId" :userPic="computPic(item.callType)" v-for="(item, index) in listData" :data='item' :key="index"></callChartBox>
                </div>
                <div class="transing wrap_img" v-show="tranStatus === 'transing'">
                  <img src="@assets/img/trans_loading.png" alt="">
                  <p>{{$t('call.transingTip')}}</p>
                </div>
                <div class="fail wrap_img" v-show="tranStatus === 'fail'">
                  <img src="@assets/img/trans_fail.png" alt="">
                  <p>{{$t('call.transFailTip')}}<span @click="transText">{{$t('call.retransmit')}}</span></p>
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>

      <tr class="content quality-check-grade" v-if="callDataTable.AUTOQC_GRADE && isQualityCheck">
        <td class="flex2">{{$t('public.qualityCheck')}}</td>
        <td class="flex5">
          <div class="left">
              <span>
                  <p>{{$t('qualityCheck.qualityGrade')}}</p>
              </span>
          </div>
          <div class="right" v-if="intelQulityCheck">
              <span v-if="scoreStatus"></span>
              <span v-else>
                <p style="color: red; font-size: 14px">{{newResultGrade}}</p>
              </span>
          </div>
          <div class="right" v-else>
            <span v-if="scoreStatus"></span>
            <span v-else>
              <p>{{callDataTable.AUTOQC_GRADE}}</p>
              </span>
          </div>
        </td>
        <td class="flex5" :class="(isCallGrade || callDataTable.DISPOSAL_AGENT !== $store.state.session.user._id)?'no-border': ''">
          <el-popover
                  v-model="qualityCheckPopover"
                  placement="top-start"
                  :title="$t('call.qualityInspectionAppeals')"
                  width="200"
                  trigger="click"
                  popper-class="call-qc-popover">
            <div class="qc-content">
              <p>{{$t('qualityCheck.qualityGrade')}}：{{$t('call.autoQcGrade', {autoQcGrade: callDataTable.AUTOQC_GRADE})}}</p>
              <p style="line-height:2;word-wrap: break-word;">{{$t('qualityCheck.commentCont')}}：{{callDataTable.AUTOQC_GRADE_COMMENT || ''}}</p>
              <textarea rows="3" style="width:100%;resize: vertical;" :placeholder="$t('call.placeholderCpmplain')" v-model.trim="comment"></textarea>
              <div style="text-align: right; margin: 20px 0 0 0">
                <el-button size="mini" type="text" @click="qualityCheckPopover = false">{{$t('public.cancel')}}</el-button>
                <el-button type="primary" size="mini" @click="commitQcComplain">{{$t('public.confirm')}}</el-button>
              </div>
            </div>
            <span slot="reference" v-show="callDataTable.DISPOSAL_AGENT === $store.state.session.user._id && !isCallGrade">{{$t('call.checkCauseAndComplain')}}</span>
          </el-popover>
        </td>
      </tr>

      <tr class="remark">
        <td>
          <textarea class="remarks" rows="2"  disabled="disabled" :placeholder="$t('call.callNotePlaceHolder')">{{callDataTable.COMMENTS}}</textarea>
        </td>
      </tr>

      <!--前媒体识别 -->
      <tr v-show="callDataTable.PREMEDIA_KEY" class="mediaRecognition">
        <td>
          <div class="left">
            <p>{{$t('call.mediaDistinguish')}}</p>
          </div>
          <div class="right" colspan="5">{{callDataTable.PREMEDIA_KEY|| '--'}}</div>
        </td>
      </tr>
    </table>
  </div>

</template>
<script>
  import {getCache, isHasFunc, getStrLength, deepClone} from '@/utils/m7Utils'
  import AudioCommon from '@/components/public-modules/audio/index.vue'
  import OldAudioCommon from '@/components/public-modules/audio/audio.vue'
  import callChartBox from '@/components/business-modules/call/call-chart-box.vue'
  import submitRecord from '@/components/public-modules/audio/submitRecord.vue'
  // import Scroll from 'better-scroll'
  export default {
    name: 'app',
    data () {
      return {
        agentId: '',
        imIcon: '', // 座席头像
        isUnfold: true, // 是否收起聊天记录
        isCallTran: false, // 是否语音转写
        tranStatus: '', // 录音转写状态
        listData: [],
        isHidenArea: false,
        currentUrl: '',
        refreshAudio: 0,
        isListent: false,
        isShowSubmitOrRevoke: false,
        isDownload: false,
        isToBlackList: false,
        cancleKeyTag: false,
        isQualityCheck: false, // 是否有查看质检的权限
        qualityCheckPopover: false, // 查看原因和申诉
        comment: '', // 申诉内容
        showOld: false, // 是否展示原生的audio
        keyword:'', //查找关键词
        callRecordAutoPlay: true, // 是否自动播放录音（用户勾选配置的）
        isShowMore: false, // 更多展示
        consultRecordArr:[],
        consultRecordList:[],
        count:0,
        joinBlackType:[
          {
            label:'仅呼入',
            type: '1'
          },
          {
            label:'仅外呼',
            type: '2'
          },
          {
            label:'呼入和外呼',
            type: '3'
          },
        ]
      }
    },
    components: {
      // Scroll,
      AudioCommon,
      OldAudioCommon,
      callChartBox,
      submitRecord
    },
    props: {
      curModel: { // 判断是否是通话模块
        type: Boolean,
        default: function () {
          return false
        }
      },
      callData: {
        type: Object,
        default: function () {
          return {}
        }
      },
      isCall: {type: Boolean, default: false}, // 是否是通话模块的通话详情
      audioId: String,
      pauseAudio: String,
      scoreStatus: {
        type: Boolean,
        default: function () {
          return false
        }
      },
      resultGrade: {
        type: Number,
        default: function () {
          return 0
        }
      },
      inputFlag: {
        type: Boolean,
        default: function () {
          return false
        }
      },
      intelQulityCheck: {type: Boolean, default: false}, // 是否是智能质检的通话详情
      isCallGrade: {type: Boolean, default: false}, // 是否是质检的通话详情
      recordShow: {type: Boolean, default: true}
    },
    computed: {
      callDataTable () {
        let data = deepClone(this.callData) || {}
        this.consultRecordArr = []
        this.consultRecordList = []
        //通话咨询录音
        if(data.CONSULT_RECORD_FILES){
          this.isShowMore = true
          let fileList = data.CONSULT_RECORD_FILES.split(',')
          fileList.forEach(item=>{
            this.recordFileName(data.FILE_SERVER, item, data.PBX,'consult')
          })
          let infoList = data.CONSULT_INFOS.split(',')
          this.consultRecordList.forEach((item,index)=>{
            let obj = {}
            obj.srcUrl = item
            obj.workNoOrPhone = infoList[index].split('_')[0]
            obj.timeStr='00:00:00/00:00:00'
            obj.currentTime = 0
            obj.allTime = 0
            obj.isplay= true
            this.consultRecordArr.push(obj)    
          })
        }else{
          this.isShowMore = false
        }
        if (data.AUTOQC_GRADE === 0) {
          data.AUTOQC_GRADE = data.AUTOQC_GRADE.toString()
        }

        this.comment = ''
        this.recordFileName(data.FILE_SERVER, data.RECORD_FILE_NAME, data.PBX)
        // 如果有HANGUP_USE该字段判定是呼入电话 HANGUP_USER通过字符串的值不同判定是哪方先挂
        if (data.HANGUP_USER && data.HANGUP_USER !== '') {
          if (data.HANGUP_USER === 'transfer') {
            data.HANGUP_USER_show = this.$t('call.inHangUpT')
          } else if (data.HANGUP_USER === 'agent') {
            data.HANGUP_USER_show = this.$t('call.inHangUpA') + '（' + this.$t('call.Activehangup') + '）'
            if (data.HANGUP_REASON) {
              if (data.HANGUP_REASON === '1') {
                data.HANGUP_USER_show = this.$t('call.inHangUpA') + '（' + this.$t('call.CauseOfHangingUp1') + '）'
              } else if (data.HANGUP_REASON === '2') {
                data.HANGUP_USER_show = this.$t('call.inHangUpA') + '（' + this.$t('call.CauseOfHangingUp2') + '）'
              } else if (data.HANGUP_REASON === '3') {
                if (data.LOOT_BY && data.LOOT_BY !== '') {
                  let agentObj = this.$store.getters.agents[data.LOOT_BY]
                  if (agentObj) {
                    data.HANGUP_USER_show = this.$t('call.inHangUpA') + '（' + this.$t('call.rootGua1') + agentObj.exten + '）'
                  }
                }
              } else if (data.HANGUP_REASON === '4') {
                if (data.FORCE_HANGUP_BY && data.FORCE_HANGUP_BY !== '') {
                  let agentObj = this.$store.getters.agents[data.FORCE_HANGUP_BY]
                  if (agentObj) {
                    data.HANGUP_USER_show = this.$t('call.inHangUpA') + '（' + this.$t('call.forceGua1') + agentObj.exten + '）'
                  }
                }
              } else if (data.HANGUP_REASON === '5') {
                data.HANGUP_USER_show = this.$t('call.inHangOutside')
              }
            }
          } else if (data.HANGUP_USER === 'customer') {
            if (data.HANGUP_REASON && data.HANGUP_REASON === '1006') {
              data.HANGUP_USER_show = this.$t('call.inHangUpD')
            } else {
              data.HANGUP_USER_show = this.$t('call.inHangUpC')
            }
          } else if (data.HANGUP_USER === 'system') {
            if (data.HANGUP_REASON && data.HANGUP_REASON === '1006') {
              data.HANGUP_USER_show = this.$t('call.inHangUpD')
            }
          } else {
            data.HANGUP_USER_show = this.$t('call.inHangUpC')
          }
        }
        return data
      },
      // 通话录音是否自动播放  用计算属性  实时更新状态
      isAutoPlayFlag () {
        if (this.isCall) {
          return false
        } else if (this.isCallGrade) {
          return this.callRecordAutoPlay
        } else {
          return true
        }
      },
      getKeyTagArr () { // CALL_SHEET_ID
        return this.$store.state.call.transCache.showKeyTagArr
      },
      newResultGrade () { // 智能质检评分
        if (this.inputFlag) {
          return this.resultGrade
        } else {
          if (this.callData.type === 'auto') {
            return this.resultGrade
          } else {
            return this.callData.gradeAmount
          }
        }
      }
    },
    watch: {
      // 监听socket推送的值 判断是否请求
      '$store.state.call.socketOfflinetRransId': function(newVal, oldVal) {
        // 判断推送的id是否为当前id并且消息不收起 & 当前id不为转写成功
        if (newVal === this.callDataTable.CALL_SHEET_ID && this.isCallTran && this.tranStatus !== 'suc') {
          this.transText(newVal)
        }
      },
      // 监听通话id的变化 判断是否在缓存里 请求
      'callDataTable.CALL_SHEET_ID' (cur, old) {
        this.isCallTran = false
        let transedIds = this.$store.state.call.transedIds || []
        if (transedIds.includes(cur)) {
          this.transText(cur)
        }
      },
      '$route.path':function(){
        this.keyword=''
      }
    },
    methods: {
      computPic (type) {
        if (type === "agent") {
          return this.imIcon || null
        }
        return null
      },
      unfoldTran () {
        this.$store.commit('call/CALL_DELETRANSEDIDS', this.callDataTable.CALL_SHEET_ID)
        this.isCallTran = !this.isCallTran
      },
      transText () {
        if (this.callDataTable.IS_DOUBLE_TRACK === 'false') {
          this.$message(this.$t('call.monoTip'))
          return
        }
        let data = {
          _id: this.callDataTable.CALL_SHEET_ID
        }
        this.$store.dispatch('offonlineTrans', data).then((res) => {
          if (!res) {
            return
          }
          this.isCallTran = true
          this.$store.commit('call/CALL_TRANSEDIDS', this.callDataTable.CALL_SHEET_ID)
          if (res.message === 'transing') {
            this.tranStatus = 'transing'
          } else if (res.message === 'trans fail') {
            this.tranStatus = 'fail'
          } else if (res.result) {
            this.imIcon = res.result.imIcon
            this.tranStatus = 'suc'
            // 重新赋值避免子组件不更新
            this.agentId = this.callDataTable.DISPOSAL_AGENT || ''
            this.listData = res.result.context || []
            // this.$nextTick(() =>{
            //   this.scroll = new Scroll(this.$refs.wrapper, {mouseWheel: true, scrollY: true, scrollbar: { fade: false }})
            //   // if (!this.scroll) {
            //   //   this.scroll = new Scroll(this.$refs.wrapper, {mouseWheel: true, scrollY: true, scrollbar: { fade: false }})
            //   // } else {
            //   //   this.scroll.refresh()
            //   // }
            // })
          }
        })
      },
      showOldAudio (curr) {
        this.showOld = curr
      },
      // 通话质检时  设置 audio 是否自动播放
      isAutoPlaySet (val) {
        let data = {'callRecordAutoPlay': val, '_id': this.$store.state.session.user._id}
        console.log(data)
        this.$store.dispatch('callRecordAutoPlay', data).then(resp => {
          if (resp && resp.success) {
            this.callRecordAutoPlay = val
            this.$message.success(this.$t('configLazyLoad.qualityCheck.saveSuccess'))
          }
        })
      },
      commitQcComplain () {
        if (this.comment.length <= 0) {
          this.$message.error(this.$t('call.placeholderCpmplain'))
          return
        }
        if (getStrLength(this.comment) > 400) { // 备注内容最多200个字
          this.$message.error(this.$t('call.limitChineseCharacters'))
          return
        }
        this.qualityCheckPopover = false
        let data = {'CALL_SHEET_ID': this.callDataTable.CALL_SHEET_ID, 'comment': this.comment}
        this.$store.dispatch('submitAppealCall', data).then(resp => {
          if (resp && resp.success) {
            this.$message.success(this.$t('call.copmplainSuccess'))
          }
        })
      },
      addCdrBlackList (num,type,label) {
        this.$emit('addCdrBlackList', num,type,label)
      },
      isSameCallID (_id) {
        let arr = this.getKeyTagArr
        let flag = true
        if (arr.length > 0) {
          for (let i = 0; i < this.getKeyTagArr.length; i++) {
            if (this.getKeyTagArr[i] === _id) { // 只有id相同的时候才会去除通话标记
              flag = false
              break
            } else {
              flag = true
            }
          }
        }
        return flag
      },
      
      recordFileName (server, name, pbx,consult) {
        console.log(server,'server')
        this.showOld = false // 每次换url之后默认隐藏旧的audio,以防切换到一个无效录音之后，再切换到有效录音还是旧的音频
        if (!server) {
          return
        }
        if (server.indexOf('cf-workphone') > -1) {
          if (new RegExp(/http?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/).test(server)){
            server = server.replace('http://', '')
          } else if (new RegExp(/https?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/).test(server)) {
            server = server.replace('https://', '')
          }
          if (document.location.protocol === 'https:') {
            if(consult){
              this.consultRecordList.push('https://' + server + '/' +name)
            }else{
              this.currentUrl = 'http://' + server + '/' +name
            }
          } else {
            if(consult){
              this.consultRecordList.push('http://' + server + '/' +name)
            }else{
              this.currentUrl = 'http://' + server + '/' +name
            }
          }
          return
        }
        if (server.indexOf('record.7moor.com') > -1 || server.indexOf('m7-record.oss-cn-hangzhou') > -1 || server.indexOf('aliyuncs.com') > -1) {
          server = 'https' + server.substr(server.indexOf(':'), server.length)
          if(consult){
            this.consultRecordList.push(server + '/' + name)
          }else{
            this.currentUrl = server + '/' + name
          }
          // return server + '/' + name
        } else if (document.location.protocol === 'https:') {
          if (pbx) {
            let self = this
            getCache('accountPbx', pbx, this, function (pbxObj) {
              if (pbxObj) {
                if (pbxObj.assDomain) {
                  let assDomain = pbxObj.assDomain
                  if (assDomain.substr(assDomain.length - 1, assDomain.length) === '/') {
                    assDomain = assDomain.substr(0, assDomain.length - 1)
                  }
                  server = assDomain
                }
              }
              if(consult){
                self.consultRecordList.push(server + '/' + name)
              }else{
                self.currentUrl = server + '/' + name
              }
            })
          } else {
            if(consult){
              this.consultRecordList.push(server + '/' + name)
            }else{
              this.currentUrl = server + '/' + name
            }
          }
        } else {
          if(consult){
            this.consultRecordList.push(server + '/' + name)
          }else{
            this.currentUrl = server + '/' + name
          }
        }
        // this.currentUrl = server + '/' + name
        this.$store.commit('call/CALL_SOUNDRECORDINGCARD_SOUNDURL', this.currentUrl)
        this.refreshAudio = Math.random()
      },
      sureCancleKeyTag (id) { // 移除通话标记
        let lastData = {CALL_SHEET_ID: id}
        this.$store.dispatch('removeKeyTag', lastData).then((req) => {
          this.cancleKeyTag = false
          this.$store.commit('call/SET_SHOW_KEY_TAG', id) // 隐藏卡片中的icon
        })
      },
      searchKeyword(val){
        let that = this
        let regx = /[^\u4e00-\u9fa50-9A-Za-z，。！？、]/g;                   //非汉字数字字母和标点符号
        val = val.replace(regx,"")                                          //去除
        let delRegExp = new RegExp('<a class="highlight" style="color:red;display:contents;">|</a>','g')    //标红用的标签，  正则
        let words = document.querySelectorAll(".writtenWords")
        for (let i = 0; i < words.length; i++) {  // 将标红的关键词取消标红
          const element = words[i].innerHTML
          words[i].innerHTML =  element.replace(delRegExp,'')
        }
        if(val){
          for (let i = 0; i < words.length; i++) {  // 关键词标红
            let text = words[i].innerHTML
            if(val.length == 1){                            //关键字长度为1的时候不用考虑那么多
              const reg = new RegExp(val,'g')
              text = text.replace(reg, '<a class="highlight" style="color:red;display:contents;">'+ val +'</a>')
              words[i].innerHTML = text
            }else{
              let deduplication = removeRepeatStr(val)                    // 字符串去重
              for(let m = 0;m<deduplication.length;m++){
                const reg = new RegExp(deduplication[m],'g')
                text = text.replace(reg, '<a class="highlight" style="color:red;display:contents;">'+ deduplication[m]+'</a>');
              }
              let rega = new RegExp("</a>","g")
              let matches =[...text.matchAll(rega)].length                        // text里标红的数量
              if(matches >= val.length){
                console.log(text,delRegExp,val)
                text = that.testreg(text,delRegExp,val)
                if(text){
                  words[i].innerHTML = text
                }
              }
            }
          }
          let firstKeyword = document.querySelector(".highlight") // 获取被标红的第一个关键词
          if(firstKeyword){ //跳转到第一个被标红的关键词
            let now = firstKeyword.offsetParent.offsetParent
            let top = now.offsetTop
            that.$refs.wrapper.scrollTop = top
          }
        }
        function removeRepeatStr(str){
            var newStr = ''
            var len = str.length
            for(var i=0;i<len;i++){
                if(newStr.indexOf(str[i]) == -1){
                    newStr = newStr + str[i]
                }
            }
            return newStr
        }
      },
      testreg(str,delRegExp,val){
        let arr = str.split(delRegExp)                        // 根据标红的地方拆成的数组a
        let regpunctuation = /[，。？、]/g
        let firstarr =  findall(arr,val[0])                   // a数组中所有关键字首字符的下标组成的数组
        let validationArray =[]                               // 验证数组，每一项都是一个true组成的数组，验证字符之间的间隔
        let flag = false
        for (let i = 0; i < firstarr.length; i++) {
            let number = firstarr[i]                          // number即为 数组 中 关键字首字符所在位置
            validationArray[i]=[]
            for(let m = 0;m<val.length-1;m++){                // n个字符，之间的间隔有n-1个
              if(val[m]===arr[number + m * 2]){               //确保关键字顺序，不然会有搜索1234 搜出 1212 的问题
                let nowstr = arr[number + m * 2 + 1]          // nowstr 即为 关键字每个字符之间的间隔
                if (nowstr === "" || (regpunctuation.test(nowstr) && nowstr.length === 1)) validationArray[i].push(true)  // 当字符串为空 或者是标点的时候 在验证数组的对应项中push一个标记
              }
            }
        }
        for(let j  = 0;j<validationArray.length; j++){
            if(validationArray[j].length === val.length-1){    // 当验证数组的某一项，也就是间隔都为true的时候  就可以进行字符串的拼接
              let nextNumber = arr.indexOf(val[val.length-1],firstarr[j]+1)
              let lastNumber = firstarr[j] + validationArray[j].length*2    // 使用lastNumber，避免abab这样的情况
              if(nextNumber>-1){
                arr[firstarr[j]] = '<a class="highlight" style="color:red;display:contents;">' + arr[firstarr[j]]
                arr[lastNumber] += '</a>'
                flag = true
              }
            }
        }
        if(flag){
          return arr.join("")
        } else{
          return false
        }

        function findall(arr, str) {
          //arr:数组，str:数组中的元素
          var results = [],
            len = arr.length,
            pos = 0
          while (pos < len) {
            pos = arr.indexOf(str, pos)
            if (pos === -1) {
              //未找到就退出循环完成搜索
              break
            }
            results.push(pos) //找到就存储索引
            pos += 1 //并从下个位置开始搜索
          }
          return results
        }
      }
    },
    mounted () {
      this.callRecordAutoPlay = this.$store.state.session.user.callRecordAutoPlay === false ? false : true
      if (this.$store.state.session.user.isAdmin || !isHasFunc('func_user_call_sheet_listen_file', this.$store.state.session.user)) {
        this.isListent = true // 禁止听录音权限
        if (this.$store.state.session.user.isAdmin || !isHasFunc('func_user_call_sheet_download_file', this.$store.state.session.user)) {
          this.isDownload = true // 禁止下载录音权限
        }
      }
      if (!isHasFunc('func_not_allow_add_blacklist', this.$store.state.session.user)) {
        this.isToBlackList = true // 禁止加入黑名单权限
      }
      if (isHasFunc('func_hide_cdr_area', this.$store.state.session.user) || (this.$store.state.session.account.isSouthEastAsia && this.$store.state.session.account.isSouthEastAsia === 'true')) {
        if (this.$store.state.session.user.type === 'admin' && this.$store.state.session.user.exten === '0000') {
          this.isHidenArea = false
        } else {
          this.isHidenArea = true
        }
      }
      if (isHasFunc('func_autoqc_result_look', this.$store.state.session.user)) {
        this.isQualityCheck = true // 是否能查看质检评分结果
      }
      if (isHasFunc('func_submit_to_quality_check', this.$store.state.session.user)) {
        this.isShowSubmitOrRevoke = true // 提交或撤回录音等权限
      }
    }
  }
</script>
<style lang="stylus" scoped>

  @import '../../../../assets/common.styl'
  .transTip
    height 40px
    line-height 40px
    background #FAFAFA
    border-top: 2px solid #E6E6E6
    border-bottom: 2px solid #E6E6E6
    span.fr.iconfont
      margin-right 16px
      font-size 16px
      color #459AE9
      cursor pointer
    span.fr.iconfont.rota
      transform rotate(180deg)
    .tran
      margin-left 16px
      color #000000
      .iconfont
        color #A6A6A6
        margin-right 2px
      .tipi
        margin-left 16px
        color #878787
  .wrapper
    height 280px
    position relative
    overflow-y scroll
    background #FAFAFA
    .wrap_img
      padding-top 70px
      text-align center
      img
        width 256px
        height 66px
      p
        font-size:12px;
        line-height:18px;
        margin-top 26px
        span
          color #459AE9
          cursor pointer
    .content1
      padding 28px 20px 2px 16px
  .dialout-phone
    max-width 13em
  .call-detail
    width 100%
    border-collapse collapse
    border 1px solid $c-border1
    .el-button
      color $cf-gray1
      font-size 12px
    tr
      border-top 1px solid $c-border1
      td
        .auto
          height auto
    tr.header-top
      border-top 0
      height 36px
      line-height 36px
      text-align center
      td
        width 100%
    tr:hover td
      /*background $c-back*/
  .header
    display flex
    height 80px
    td
      display flex
      width 100%
      .left
        flex 4
        display flex
        align-items center
        justify-content center
        .dvv
          display: inline-block;
          position: relative;
          top: 3px;
        .dvv8
          display: inline-block;
          position: relative;
          top: 3px;
          line-height 1

        .mar
          margin-left: 8px
          line-height: 14px
        div
          i
            margin-right 6px
            color: $cf-level4
          span
            font-size: 12px
            color: $cf-gray2
          span:nth-child(2)
            display inline-block
            padding 0 10px 0
          span:nth-child(3)
            margin-left: 6px


      .middle
        flex 2
        p:nth-child(1)
          display flex
          justify-content center
          margin-top 16px
          font-size 14px
        p:nth-child(2)
          margin-top 8px
          display flex
          justify-content center
        p:nth-child(3)
          margin-top 5px
          display flex
          justify-content center
          color: $cf-gray2
      .arrow
        display inline-block
        positon relative
        width 160px
        height 1px
        border-bottom 2px solid $cf-gray7
        &:after
          content ''
          display inline-block
          margin -6px 0 10px 158px
          border-bottom 9px solid $cf-gray7
          border-right 9px solid transparent

      .right
        flex 4
        display flex
        align-items center
        justify-content center
        span
          margin-left:6px
          font-size: 12px
          color: $cf-gray2
        i
          color: $cf-level4
  .content
    height 125px
    display flex
    td:nth-child(1)
      color: $cf-level1
      font-size: 14px
    .flex2
      flex 2
      text-align center
      line-height 120px
      font-size 16px
      font-weight bold
    .flex5
      display flex
      flex 5
      border-left 1px solid $c-border1
      .left
        /*flex 3*/
        width: 45%
        height: 125px
        display table
        span
          display: table-cell;
          vertical-align: middle;
          p
            text-align right
            margin-top: 10px
            font-size: 12px
            color: $cf-gray6
            margin-right 10px
      .right
        /*flex 4*/
        width: 55%
        display table
        height: 125px
        span
          display: table-cell;
          vertical-align: middle;
          p
            text-align left
            font-size: 12px
            margin-top: 10px
            color: $cf-gray2
  .quality-check-grade
    height 70px
    line-height 70px
    .flex2
      line-height 70px
    .flex5 .left, .flex5 .right
      height 70px
      line-height 70px
    .flex5>span
      color $c-main
      display inline-block
      width 100%
      text-align center
      cursor pointer
.cust-content
    height 70px
    line-height 70px
    .flex2
      line-height 70px
    .flex10
      display flex
      flex 10
      border-left 1px solid $c-border1
      p
        line-height 70px
        padding-left 30px
        color: $cf-gray1

  .main
    height 125px
    display flex
    td:nth-child(1)
     color: $cf-level1
     font-size: 14px
    .flex2
      flex:2
      text-align center
      line-height 115px
      font-size 16px
      font-weight bold
    .flex5
      display flex
      flex 5
      border-left 1px solid $c-border1
      font-size: 12px;
      color: $cf-gray6;
      .left
        /*flex 3*/
        width: 45%
        display table
        height: 125px
        span
          display: table-cell;
          vertical-align: middle;
          p
            text-align right
            margin-right 10px
            margin-top: 10px
      .right
        /*flex 4*/
        width:55%
        display table
        height: 125px
        span
          display: table-cell;
          vertical-align: middle;
          font-size: 12px;
          color: $cf-gray2;
          button
            padding: 0;
            margin-left: -4px;
            font-size: 12px;
            color: $cf-gray2;
            margin-top: 10px
            font-weight normal
          div
            margin-top: 10px
            i
              display table-cell
              position: relative;
              top: 4px;

          p
            margin-top: 10px
          span
            margin-top: 10px

  .record
    height 80px
    td:nth-child(1)
     color: $cf-level1
     font-size: 14px
    td
      display flex
      width 100%
      height 80px
      .left
        flex 1
        text-align center
        >p
          margin-top 25px
          font-size 16px
          font-weight bold
        span p
          margin-top 3px
      .right
        flex 5
        position relative
        border-left 1px solid $c-border1
        .audio-wrap
          line-height 100px
          margin-left 10px
  .submit-record,.submit-record td
    height 36px
    line-height 36px
   .submit-record .right
     text-indent 2.5em
  .mediaRecognition
    min-height 40px
    height 100%
    td
      display flex
      height 100%
      min-height 40px
      .left
        flex 1
        display flex
        justify-content center
        align-items center
        font-size 16px
        font-weight bold
        p
          color: $cf-level1
          font-size: 14px
      .right
        flex 5
        border-left 1px solid $c-border1
  .remark
    td
      box-sizing border-box
      padding 0 15px
      box-sizing border-box
      padding 0 15px
    .remarks
      border-radius 3px
      width 100%
      margin 13px 0 9px 0
      box-sizing border-box
      color $cf-gray0
      padding 4px 6px
      background #fafafa
      border-color $c-border1

  .table-agent
    max-width 5em
  .table-agent-ten
    max-width 90px
    cursor pointer
  .many-queue
    max-width 10em
    cursor pointer
  .table-agent-five
    max-width 90px
    cursor pointer
  .icon
    cursor pointer
  .icon-guanbi
    font-size 12px
    font-weight bold
  .remove-warn
    line-height 34px
  .remove-btn
    text-align right
    margin 0
  .exhalation
    color $cf-color0
  .incoming
    color $cf-color2
.content .no-border
  border-left 0
.highlight
  color red
.dropdownStyle
  li
    text-align center
    line-height 28px
    cursor pointer
</style>


